<template>
    <el-card shadow="hover">
        <template #header>
            <el-icon style="display: inline; vertical-align: middle"> <ele-CircleCheckFilled /> </el-icon>
            <span style=""> 我的待办 </span>
        </template>
        <MkTodo :todoList="todoModel.model?.todoList" :save="update"></MkTodo>
    </el-card>
</template>

<script lang="ts">
export default {
    title: '我的待办',
    icon: 'ele-CircleCheckFilled',
    description: '待办列表',
};
</script>

<script setup lang="ts" name="todo">
import { useUserInfo } from '/@/stores/userInfo';
import { BasViewModelApi } from '/@/api/bas/basViewModel';
import { BasViewModel } from '/@/api/bas/basViewModel/dto';

import { onMounted } from 'vue';
const todoModel = ref({} as BasViewModel)


onMounted(async () => {
    // 加载用户的待办
    todoModel.value = await BasViewModelApi().queryFirst({
        code: "TodoList",
        category: useUserInfo().userInfos.id.toString()
    }) ?? {
        id: 0,
        code: "TodoList",
        category: useUserInfo().userInfos.id.toString()
    } as BasViewModel;
})

const update = async (todoList: any) => {
    todoModel.value.model = { userId: useUserInfo().userInfos.id, todoList: todoList };
    if (todoModel.value.id == 0) {
        todoModel.value.id = await BasViewModelApi().add(todoModel.value)
    } else {
        // 更新待办
        await BasViewModelApi().update(todoModel.value)
    }
}

</script>